<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul ><!--"user in users" users代表要遍历的数组，user代表数组中的元素-->
       <li v-for="user in users" v-if="user.age>21">  <!-- v-if="user.age>21"可以作为查询条件-->
            {{user.name}}--{{user.gender}}--{{user.age}}
        </li>
    </ul>
    <hr>
    <ul ><!--"(user,index) in users" users代表要遍历的数组，user代表数组中的元素,index代表索引-->
        <li v-for="(user,index) in users">
            {{index}}--->{{user.name}}--{{user.gender}}--{{user.age}}
        </li>
    </ul>
    <hr>
    <ul >
        <li v-for="value in login">
           {{value}}
        </li>
    </ul>
    <hr>
    <ul >
        <li v-for="(value,key) in login">
            {{value}}---{{key}}
        </li>
    </ul>
    <hr>
    <ul >
        <li v-for="(value,key,index) in login">
            {{value}}--->{{key}}--->{{index}}
        </li>
    </ul>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    var vm = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
             users:[        // 数组里面的{}代表对象，对象里面是属性
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ],
           login:{usrename:'张三',password:'123456'}
        }
    })
</script>
</html>